<?php 
use Wdl\helper\webHelper;
?>
 
<div class="panel panel-default">
    <ul class="nav nav-tabs" style="margin-top: 5px; padding-left: 10px;">
  
        <li class="{if (empty($rd) || $rd=='index')}active{/if}">
        <a href="{php echo $this->createWebUrl('slogs', array('op' => $operation))}"> 
			 {$submenus[$operation]['name']}列表</a></li>
       
    </ul>

    <div class="panel-body table-responsive">
       	 
        <form action="./index.php" method="get" class="form-horizontal" role="form">
            <div class="search-box" style="margin-bottom: 20px; width: 100%; align-items: center; ">          
		
                <div  style="margin-right: 10px;">
                    <span >关键字 :</span>
                </div>
          
				<div class="col-xs-12 col-sm-6 col-lg-6">
                    <input type="hidden" name="c" value="site" />
                    <input type="hidden" name="a" value="entry" />
                    <input type="hidden" name="m" value="kbwdl_shequzufang" />
                    <input type="hidden" name="do" value="slogs" />
                    <input type="hidden" name="op" value="{$operation}" />
                  
                    <input type="hidden" name="export" value="0" />
            
					<input class="form-control" name="keyword" id="" type="text" value="{$_GPC['keyword']}">

				</div>
                 <div class="col-xs-12 col-sm-2 col-lg-2">

					<button class="btn btn-default"><i class="fa fa-search"></i> 搜索</button>

				</div>
             
        </div>
		</form>
      
        <!-- 搜索结束 -->
        <table class="table table-hover">
			<thead class="navbar-inner">
	            <tr>
                    <th style="width:5%;">ID</th>
                    <th >接收人</th>	
					<th>发消息人</th>                  
					<th  style="width:45%;">消息 </th>
					<th style="text-align:right">访问信息</th>
				</tr>
             
			</thead>
			<tbody>
				{loop $list $item}
				<tr>
					<td>{$item['id']}</td>
					
					<td>
                        <p> 	 
                            <img src="{$item['thumb']}" width="50" height="50"
                            style="float: left; margin-right: 10px;"/>
                            <p>                                           
                           
                          {$item['nickname']}
                            </p>
                             <p>{if $item['iscompany']==1}经纪人{/if}</p>
                        </p>
                    </td>
                    <td>
                        <img src="{$item['from_thumb']}" width="50" height="50"
                        style="float: left; margin-right: 10px;"/>
                        <p>                                           
					   
                      {$item['from_acount_info']['username']}
                        </p>
                        
					</td>
					<td>
                        <p> {$item['content']}</p>
					</td>

					<td style="text-align:right;">
                     
                            <a   onclick="showmsg(this,{$item['id']})"  class="btn btn-default btn-sm" title="记录"> 记录</a>
                        </p>
					</td>

				</tr>

				{/loop}

			</tbody>

		</table>

		{$pager}
    </div>
</div>

<div class="modal modal-type" tabindex="-1" role="dialog" id="msglistbox">
    <div class="modal-dialog" role="document" >
 
        <div class="modal-content">
            
            <div class="modal-header clearfix">
               对话记录
                <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
            </div>
            <div class="modal-body">
                <div class="row">
                    <div class="" style="text-align: center;">
                        <a  class="btn loadmore btn-default btn-sm" title="记录"> 加载更多历史对话</a>
                    </div>
                    <div class="col-md-12">                        
                        <div class="cu-chat"  id="lbsdata">

                        </div>
                     </div>
                </div>
            </div>          
            
        </div>       
    </div>
</div> 
<script>
    function showmsg(obj,id ){
        $(".loadmore").unbind('click');
        $('#lbsdata').html("");
        var time = '{php echo time()}'
        var page = 1;
        var url = "{php echo $this->createWebUrl('slogs', array('op'=>'msglist'))}&id="+id+"&t="+time;
          $.get( url, function(ret){

             $('#lbsdata').append( ret );    
             var totalpage = $("#lbsdata").find('.totalpage').data("total");

             $('.loadmore').html("加载更多历史对话(第"+ page +"页/共"+ totalpage+"页)");
             $(".loadmore").bind('click', function(){
                if(page>= totalpage){
                    $('.loadmore').html("已经没有更多了(第"+ page +"页/共"+ totalpage+"页)");
                    return false;
                }
                page = page + 1;                
                $.get( url + "&page="+ page  , function(ret){ 

                    $('#lbsdata') .prepend( ret  )
                    $('.loadmore').html("加载更多历史对话(第"+ page +"页/共"+ totalpage+"页)");
                })
            
             })
          })
          $('#msglistbox').modal( ).show()
      }
  </script>
<style>
    /* ==================
             聊天
     ==================== */
     
     .cu-chat { 
      height: 500px;
      overflow-y: auto;  
    }
    .aui-chat-right{
        justify-content: flex-end;
    }
    .cu-item{
        display: flex;
        gap: 10px 10px;
        margin-left: 30px;
        margin-right: 30px;
        padding-top: 10px;
    }
    .cu-item .main{
    
        background-color: #f1f1f1;
        border-radius: 10px;
        width: 60%;  
        padding: 7px;   
    }
    .cu-avatar{
        border-radius: 50%;
        width: 30px;
        height: 30px;
    }
    .aui-chat-left{
        justify-content: flex-start;
    }
    .cu-item .date
    {
        color: #999;
        margin-bottom: 10px;
    }
    .aui-chat-right .date{
        text-align: right;
    }
    .aui-chat-right .main{
        text-align: right;
    }
    .cu-item .how{
        display: flex;
        align-items: center;
        gap: 10px;
        flex-direction: column;
    }
     
    </style>